<template>
  <div class="sub">
    <div>开始时间</div>
    <div class="block">
      <el-date-picker
        v-model="Date_start"
        size="large"
        :style="{fontSize:'0.36rem'}"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期时间"
        @focus="getdayValue"
        @change="DateDiff(Date_start, Date_end)"
        :picker-options="expireTimeOption"
      >
      </el-date-picker>
    </div>
    <div>结束时间</div>
    <div class="block">
      <el-date-picker
        :clearable="false"
        v-model="Date_end"
        size="large"
        type="datetime"
        :style="{fontSize:'0.36rem'}"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        @focus="setdayValue"
        placeholder="结束日期时间"
        @change="DateDiff(Date_start, Date_end)"
        :picker-options="pickerOptions1"
      >
      </el-date-picker>
    </div>
    <div class="red">注:不足一天按一天计算!</div>
    <h3><i class="el-icon-document"></i>&nbsp;购买信息</h3>
    <ul>
    <el-row>
        <el-col :span="6">设备ID</el-col>
        <el-col :span="18">{{ nvr_id }}  &nbsp;</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">设备名称</el-col>
        <el-col :span="18">{{ nvr_name == null ? '无': nvr_name}}  &nbsp;</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">设备IMEI</el-col>
        <el-col :span="18">{{ nvr_IMEI }} &nbsp;</el-col>
      </el-row>
       <el-row>
        <el-col :span="6">购买方式</el-col>
        <el-col :span="18">分段购买</el-col>
     </el-row>
       <el-row>
        <el-col :span="6">购买天数</el-col>
        <el-col :span="18">{{ iDays }}  &nbsp;</el-col>
     </el-row>
    </ul>
    <div id="money">
      总金额: ¥ <span>{{ totalMoney }}</span>
    </div>

    <el-button type="primary" class="paypage" @click="paypage">购 &nbsp;买</el-button>
    <pay-page
      v-show="page"
      :payb="page"
      @child-msg="getChildMsg"
      :Date_start="Date_start"
      :Date_end="Date_end"
      :totalMoney="totalMoney"
      :idays="iDays"
      :IMEI="this.nvr_IMEI"
      :ind="ind"
    ></pay-page>
  </div>
</template>
<script>
import PayPage from "@/components/PayPage";
export default {
  data() {
    return {
      Date_start: "",
      Date_end: "",
      iDays: 0,
      ind: 1, //支付类型 1分期购买
      page: false,
      expireTimeOption: {
        disabledDate(date) {
          return date.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptions1: {
        disabledDate: (date) => {
          return (
            date.getTime() < Date.now() - 8.64e7 ||
            date.getTime() < new Date(this.Date_start).getTime() - 8.64e7
          );
        },
      },
    };
  },
  props: [
    "nvr_IMEI",
    "permanentPurchase", //总金额
    "purchaseInstallments", //分期金额
    "nvr_id",
    "nvr_name",
  ],
  methods: {
    setdayValue() {
      this.Date_end = new Date(new Date(this.Date_start));
    },
    getdayValue() {
      this.Date_start = new Date();
    },
    paypage() {
      if (this.totalMoney > 0) {        
        this.page = true;        
      } else {
       if(this.purchaseInstallments == undefined){
        this.$message({
          message: "获取设备信息有误,请联系客服!!",
          type: "warning",
          offset: 80,
        });
        }else{
       this.$message({
          message: "购买时间必须大于一天!!",
          type: "warning",
          offset: 80,
        });}
      }
    },
    getChildMsg(msg) {
      this.page = msg;
    },
    DateDiff(sDate1, sDate2) {
      var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      console.log(userAgent);
      if (userAgent.indexOf("Safari") > -1) {
          if (sDate1 != "" && sDate2 != "") {
            console.log('苹果程序');
        let odate1 = new Date(sDate1.replace(/-/g, '/')).getTime();
        let odate2 = new Date(sDate2.replace(/-/g, '/')).getTime();
        let iDays = Math.ceil(Math.abs(odate1 - odate2) / 1000 / 60 / 60 / 24);
        this.iDays = iDays;
      }
    } else{
       if (sDate1 != "" && sDate2 != "") {
         let odate1 = new Date(sDate1).getTime();
        let odate2 = new Date(sDate2).getTime();
        let iDays = Math.ceil(Math.abs(odate1 - odate2) / 1000 / 60 / 60 / 24);
        this.iDays = iDays;
      }
    }
    },
  },
  computed: {
    // 计算属性的 getter
    totalMoney: function () {
      // `this` 指向 vm 实例
      return this.iDays * this.purchaseInstallments;
    },
  },
  beforeMount() {
    this.ime = this.nvr_IMEI;
  },
  components: {
    PayPage,
  },
};
</script>
<style lang="scss" scoped>

.sub {
  padding: 0.25rem;
  &>div {
    text-align: left;
    margin-bottom: 0.15rem;
    font-size: .36rem;
  }
  .block {
    width: 100%;
    .el-input {
      width: 100%;
    }
  }
  .red {
    color: lightcoral;
  }

  ul {
    padding: 0.2rem 0 0.3rem 0;

  }

 
}


</style>